<template>
  <div class="app-container">
    <el-card>
      <title-line title="基本参数" />
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :lg="12" :xl="10">
            <el-form-item label="页面名称：" prop="title">
              <el-input v-model="formData.title" placeholder="请输入页面名称（30字以内）" />
            </el-form-item>
            <el-form-item label="是否开启：" prop="isShow">
              <el-radio-group v-model="formData.isShow">
                <el-radio v-for="(item, index) in SERVICE_STATUS" :key="index" :label="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="16" :xl="12">
            <el-form-item label="指向位置：" prop="pointPlace">
              <point-position v-model="formData" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="页面内容" prop="content">
          <tinymce v-model="formData.content" />
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button @click="resetForm"> 取消 </el-button>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import rules from './rules'
import _ from 'lodash'
import { PointPosition } from '@components'
import { SERVICE_STATUS } from '@/enum/message'
import { mapMutations } from 'vuex'
import { useValidatepointPlace } from '@/hooks'
export default {
  name: 'GuideDetail',
  components: {
    PointPosition
  },
  data() {
    return {
      formData: {
        title: '',
        isShow: 0,
        pointPlace: 0,
        targetParam: '',
        content: ''
      }
    }
  },
  computed: {
    rules() {
      return rules
    },
    SERVICE_STATUS() {
      return SERVICE_STATUS
    }
  },
  created() {
    this.getDetail()
  },
  mounted() {},
  methods: {
    ...mapMutations('base', ['SET_POINT_SELECT']),
    // 新增
    add: _.debounce(async function () {
      const params = {
        ...this.formData
      }
      const { status, msg } = await this.$http.message.guideApi.add(params)
      if (status === 200) {
        this.$message.success('添加成功')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    }, 200),
    // type: 'update'获取详情
    async getDetail() {
      const { id, type } = this.$route.query
      if (!type) return
      const { data } = await this.$http.message.guideApi.getDetail(id)
      for (const key in this.formData) {
        this.formData[key] = data[key]
        if (key === 'targetParam') {
          this.formData.targetParam = parseInt(data[key])
        }
      }
      if (this.formData.pointPlace === 2) {
        this.SET_POINT_SELECT({
          key: 'equInfo',
          data: [{ ...data.deviceInfo }]
        })
      } else if (this.formData.pointPlace === 3) {
        this.SET_POINT_SELECT({ key: 'store_name', data: data.storeInfo.storeName })
      }
      this.formData.isShow = this.formData.isShow ? 1 : 0
    },
    // 编辑
    updated: _.debounce(async function () {
      const { id } = this.$route.query
      const { status, msg } = await this.$http.message.guideApi.update({
        ...this.formData,
        id
      })
      if (status === 200) {
        this.$message.success('编辑成功')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    }, 200),
    submitForm() {
      const { type } = this.$route.query
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        let flag = useValidatepointPlace(this.formData)
        if (!flag) return
        this.loading = true
        if (type === 'update') {
          this.updated()
        } else {
          this.add()
        }
        this.loading = false
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
